<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>毕设格式规格辅助工具</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        .left {
            float: left;
            width: 70%;
        }
        .right {
            float: right;
            width: 30%;
        }
        input[type=text] {
            padding: 10px;
            width: 600px;
        }
        textarea {
            padding: 10px;
            width: 80%;
        }
        .note {
            color: #999;
            font-size: 13px;
        }
        .required {
            color: #f00;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>毕设格式规格辅助工具</h1>
        <div class="box">
            <div class="left">
                <div>
                    论文独创性声明 <span class="required">*</span><br>
                    <textarea v-model="form.ducuang" cols="30" rows="10">本人郑重声明：所呈交的毕业作业（论文），是本人在老师指导下，独立进行研究所取得的成果。论文中除了已经注明引用的内容外，不包含任何他人享有的著作权内容。其他个人和集体对本研究工作的启发和所做出的贡献，均已在论文中以明确的方式标明。如本文被查证有抄袭或剽窃行为，本人愿意承担由此引发的法律后果，并依据学校的规章制度接受相应处理。</textarea>
                </div>
                <div>
                    论文版权使用授权声明 <span class="required">*</span><br>
                    <textarea v-model="form.banquan" cols="30" rows="10">本人郑重声明：所呈交的毕业作业（论文），是本人在老师指导下，独立进行研究所取得的成果。论文中除了已经注明引用的内容外，不包含任何他人享有的著作权内容。其他个人和集体对本研究工作的启发和所做出的贡献，均已在论文中以明确的方式标明。如本文被查证有抄袭或剽窃行为，本人愿意承担由此引发的法律后果，并依据学校的规章制度接受相应处理。</textarea>
                </div>
                <div>
                    摘要 <span class="required">*</span><br>
                    <textarea v-model="form.zaiyao" cols="30" rows="10">近年来互联网技术的发展速度越来越快，很多先进的计算机技术和信息技术随之涌现出来。使计算机的应用水平得到显著提高。因此，也需要一家顶级IT战略和软件顾问公司，遵循顺畅的沟通模式和高透明的项目管理。“松茂科技”就是一家领先的科技开发及顾问公司，拥有软件技术团队，专注于为软件公司，数字机构，创业团队等提供企业定制的软件开发，网页/移动应用程序开发服务。</textarea>
                </div>
                <div>
                    关键字 <span class="required">*</span><br>
                    <textarea v-model="form.keywords" cols="30" rows="3">软件顾问 CMS系统 插件API 松茂科技</textarea>
                </div>
                <div>
                    正文 <span class="required">*</span> <br />
                    <span class="note">格式使用 markdown ，支持 一级标题（#），二级标题（##），三级标题（###）</span>
                    <br>
                    <textarea v-model="form.content" cols="30" rows="10">
                        # 一级标题
                        ## 二级标题
                        ### 三级标题
                    </textarea>
                </div>
                <div>
                    参考文献 <br />
                    <span class="note">
                        一行一个，如：
                        黄济. 教育哲学通论[M]. 太原:山西教育出版社，1998: 9-10.<br />
                        黄济. 教育哲学通论[M]. 太原:山西教育出版社，1998: 9-10.<br />
                    </span><br>
                    <textarea v-model="form.wenxian" cols="30" rows="3"></textarea>
                </div>
                <div>
                    附录 <br />
                    <span class="note">
                        一行一个，如：
                        黄济. 教育哲学通论[M]. 太原:山西教育出版社，1998: 9-10.<br />
                        黄济. 教育哲学通论[M]. 太原:山西教育出版社，1998: 9-10.<br />
                    </span><br>
                    <textarea v-model="form.fulu" cols="30" rows="3"></textarea>
                </div>
                <div>
                    致谢 <span class="required">*</span><br>
                    <textarea v-model="form.zixie" cols="30" rows="3">
                        经过几个月的忙碌和学习，本次毕业设计已完成，同时也意味着大学生活即将结束。在大学阶段，我在学习上和思想上都受益非浅，每一位老师的悉心教导都是我完成这篇论文的基础，在此要感谢老师给予了本人很多的支持与帮助，从开始的毕业设计的选题，时间规划上，以及毕业设计的操作过程中，若没老师的督促与指导，完成本次设计是难以想像的。同时感谢技术指导老师，李闯闯老师能在百忙之中抽出时间提供技术支持，以及在最后的测试修改期间，对整个松茂科技官网进行查缺补漏。同时还要感谢几年学习中给予帮助的各位老师与同学，最后还要感谢我的辅导员，感谢这几年对本人学习生活的关心和照顾。
    写作毕业论文是一次再系统学习的过程，毕业论文的完成同样也意味着新的学习生活的开始。我将在今后的工作中把母校的优良传统发扬光大。最后还要感谢参加本次论文答辩的老师，在工作繁忙的同时为了我们毕业答辩而不辞辛苦，为我们即将走向社会了学生把好最后一关，同时学校和学院给了我们大力的支持，给了我们广阔了学习环境，在此表示衷心的感谢。
                    </textarea>
                </div>
            </div>
            <div class="right">
                <div>
                    毕业设计（论文、作业）题目：
                    <input type="text" v-model="form.title">
                </div>
                <div>
                    分校（点）：
                    <input type="text" v-model="form.school">
                </div>
                <div>
                    年级、专业： 
                    <input type="text" v-model="form.zuanye">
                </div>
                <div>
                    教育层次：
                    <input type="text" v-model="form.jiaoyu">
                </div>
                <div>
                    学生姓名：
                    <input type="text" v-model="form.stuname">
                </div>
                <div>
                    学　　号：
                    <input type="text" v-model="form.stuno">
                </div>
                <div>
                    指导教师：
                    <input type="text" v-model="form.teacher">
                </div>
                <div>
                    完成日期：
                    <input type="text" v-model="form.accdate">
                </div>
                <div>
                <button @click.prevent="submit">生成文档</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        new Vue({
    el: '#app',
    data: {
        form: {
            title: 'XXXXYYYYZZZZ开发与设计',
            school: '传智专修学院',
            zuanye: '全栈',
            jiaoyu: '大专',
            stuname: '张三',
            stuno: '12343321',
            teacher: '李四',
            accdate: '2019-10-10',
            ducuang: `本人郑重声明：所呈交的毕业作业（论文），是本人在老师指导下，独立进行研究所取得的成果。论文中除了已经注明引用的内容外，不包含任何他人享有的著作权内容。其他个人和集体对本研究工作的启发和所做出的贡献，均已在论文中以明确的方式标明。如本文被查证有抄袭或剽窃行为，本人愿意承担由此引发的法律后果，并依据学校的规章制度接受相应处理。`,
            banquan: `本人郑重声明：所呈交的毕业作业（论文），是本人在老师指导下，独立进行研究所取得的成果。论文中除了已经注明引用的内容外，不包含任何他人享有的著作权内容。其他个人和集体对本研究工作的启发和所做出的贡献，均已在论文中以明确的方式标明。如本文被查证有抄袭或剽窃行为，本人愿意承担由此引发的法律后果，并依据学校的规章制度接受相应处理。`,
            zaiyao: `近年来互联网技术的发展速度越来越快，很多先进的计算机技术和信息技术随之涌现出来。使计算机的应用水平得到显著提高。因此，也需要一家顶级IT战略和软件顾问公司，遵循顺畅的沟通模式和高透明的项目管理。“松茂科技”就是一家领先的科技开发及顾问公司，拥有软件技术团队，专注于为软件公司，数字机构，创业团队等提供企业定制的软件开发，网页/移动应用程序开发服务。`,
            keywords: '软件顾问 CMS系统 插件API 松茂科技',
            content: '#绪论\r\n##选题的依据及意义\r\n随着时代的发展......\r\n##国内外现状研究\r\n本节对现有...\r\n###html\r\nHTML是一门...\r\n###css\r\nCSS是一门...',
            wenxian: '黄济. 教育哲学通论[M]. 太原:山西教育出版社，1998: 9-10.\r\n黄济. 教育哲学通论[M]. 太原:山西教育出版社，1998: 9-10.',
            fulu: '黄济. 教育哲学通论[M]. 太原:山西教育出版社，1998: 9-10.\r\n黄济. 教育哲学通论[M]. 太原:山西教育出版社，1998: 9-10.',
            zixie: `经过几个月的忙碌和学习，本次毕业设计已完成，同时也意味着大学生活即将结束。在大学阶段，我在学习上和思想上都受益非浅，每一位老师的悉心教导都是我完成这篇论文的基础，在此要感谢老师给予了本人很多的支持与帮助，从开始的毕业设计的选题，时间规划上，以及毕业设计的操作过程中，若没老师的督促与指导，完成本次设计是难以想像的。同时感谢技术指导老师，李闯闯老师能在百忙之中抽出时间提供技术支持，以及在最后的测试修改期间，对整个松茂科技官网进行查缺补漏。同时还要感谢几年学习中给予帮助的各位老师与同学，最后还要感谢我的辅导员，感谢这几年对本人学习生活的关心和照顾。写作毕业论文是一次再系统学习的过程，毕业论文的完成同样也意味着新的学习生活的开始。我将在今后的工作中把母校的优良传统发扬光大。最后还要感谢参加本次论文答辩的老师，在工作繁忙的同时为了我们毕业答辩而不辞辛苦，为我们即将走向社会了学生把好最后一关，同时学校和学院给了我们大力的支持，给了我们广阔了学习环境，在此表示衷心的感谢。`
        }
    },
    methods: {
        submit() {
            axios({
                url: 'http://www.wuyinglei.com:36000',
                method: 'post',
                data: this.form,
                responseType: 'blob'
            }).then(res=>{
                let blob = new Blob([res.data], {type: 'application/msword'})
                let downloadElement = document.createElement('a');
                let href = window.URL.createObjectURL(blob); //创建下载的链接
                downloadElement.href = href;
                downloadElement.download ='毕设参考模板.docx'; //下载后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
                window.URL.revokeObjectURL(href); //释放掉blob对象
            })
        }
    }
})
    </script>
</body>
</html>